import Taro, { Component } from '@tarojs/taro'
import PropTypes from 'prop-types'
import _ from 'lodash'
import { View, Input, Text } from '@tarojs/components'
import { AtIcon } from 'taro-ui'
import { generateQueryString } from '../../utils/index'
import './index.scss'

class AddressItem extends Component {

	static propTypes = {
		info: PropTypes.object,
		isSend: PropTypes.bool,
		placeholder: PropTypes.string,
		isEdit: PropTypes.bool
	}

	static defaultProps = {
		isSend: true,
		isEdit: false,
		placeholder: '请填写收件人信息',
		info: {}
	}

	render(){
		const { info, isSend, isEdit, placeholder } = this.props

		return(
			<View
				className="address-item"
			>
				<View className="item-detail">
					<View className="name-first" style={{backgroundColor: `${isSend?'#23B1F9':'#FF5D24'}`}}>{isSend ? '寄':'收'}</View>
					{!_.isEmpty(info) ? <View className="item-detail-box" onClick={this.toAddressCreate}>
						<View className="name-phone">
							<View className="name">{info.linkman}</View>
							<View className="phone">{info.mobile}</View>
						</View>
						<View className="address-detail">
							<Text>{`${info.provinceCn || ''}${info.cityCn || ''}${info.districtCn || ''}${info.address || ''}`}</Text>
						</View>
					</View> : <View hoverClass="hover-bg" className='item-detail-box item-detail-placeholder' onClick={this.toAddressCreate}>{placeholder}</View>}
					{isEdit && <View className="address-book" onClick={(e) => {
						e.stopPropagation()
						e.preventDefault()
						Taro.navigateTo({ 
							url: `/pages/addressbook/index?type=select&user=${isSend?'sender':'receiver'}`
						})
					}}>地址簿</View>}
				</View>
				
			</View>
		)
	}

	toAddressCreate = () => {
		const { isEdit, isSend } = this.props
		if(isEdit){
			Taro.removeStorageSync('map_select_city')
			Taro.navigateTo({
				url: `/pages/addresscreate/index?type=addselect&user=${isSend?'sender':'receiver'}`
			})
		}
		
	}
}

export default AddressItem